<template>
    <div id="content">

      <mu-container class="module-pane">
        <mu-row :key="idx" v-for="(arr, idx) in modules">
          <mu-col class="mu-col"
                  span="3"
                  :key="index"
                  v-for="(value, index) in arr">
            <mu-button class="mu-button" flat @click="function() { onModuleClick(value.routeName) }">
              <mu-flex align-items="center" justify-content="center" direction="column">
                <mu-avatar class="mu-avatar" color="rgba(0, 0, 0, 0)">
                  <img :src="value.icon">
                </mu-avatar>
                <span class="module-title">{{ value.title }}</span>
              </mu-flex>
            </mu-button>
          </mu-col>
        </mu-row>
      </mu-container>

      <mu-container class="news-pane">
        <mu-tabs :value.sync="activeTab" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" center>
          <mu-tab v-for="value in tabs">{{ value }}</mu-tab>
        </mu-tabs>
        <div v-for="(news, idx) in newsList"
             :key="idx"
             v-show="activeTab === idx">
          <mu-list @change="onItemClick">
            <template v-for="(value, index) in news">
              <mu-list-item
                      class="mu-list-item"
                      button
                      :ripple="true"
                      :key="index"
                      :value="{tab: idx, article: value}">
                <mu-flex class="item-content" align-items="center">
                  <mu-flex class="item-content-text" direction="column" fill>
                    <mu-list-item-title class="item-title">{{ value.title }}</mu-list-item-title>
                    <p class="item-desc">{{ value.description }}</p>
                    <div class="item-author" v-show="value.author.length > 0">{{ value.author }}</div>
                  </mu-flex>
                  <img :src="value.image != null && value.image !== '' && value.image !== 'null' ? value.image : defaultImage"/>
                </mu-flex>
              </mu-list-item>
              <mu-divider class="mu-divider"/>
            </template>
          </mu-list>
        </div>

        <mu-button id="more-news" color="primary" flat @click="onMoreNewsClick">更多资讯
          <mu-icon color="primary" value="keyboard_arrow_right"></mu-icon>
        </mu-button>
      </mu-container>

    </div>
</template>

<script lang="ts">
  import news from '../../../phr/mock/HomeMock.js';
  import NewsService from '../../../phr/service/knowledge/HealthKnowledgeService';
  import {SUCCESS} from '../../common/ErrorCode';

  let constant = {
    network_error: '网络异常',
    modules: [
      [
        {icon: require('@/assets/icon/pills.svg'), title: '药品信息', routeName: 'MedicineInformation'},
        {icon: require('@/assets/icon/heartbeat.svg'), title: '健康指数', routeName: 'HealthIndex'},
        {icon: require('@/assets/icon/medical-journal.svg'), title: '健康档案', routeName: ''},
        {icon: require('@/assets/icon/syringe.svg'), title: '计划免疫', routeName: ''},
      ], [
        {icon: require('@/assets/icon/marker.svg'), title: '就医地图', routeName: 'Map'},
        {icon: require('@/assets/icon/stethoscope.svg'), title: '自助挂号', routeName: 'Registration'},
        {icon: require('@/assets/icon/nurse.svg'), title: '服务评价', routeName: ''},
        {icon: require('@/assets/icon/tablet.svg'), title: '诊疗记录', routeName: 'MedicalRecord'},
      ]
    ],
  };

  export default {
    data() {
      return {
        modules: constant.modules,
        activeTab: 0,
        tabs: {
          0: '综合资讯',
          1: '生活保健',
          2: '疾病科普',
          3: '养老资讯'
        },
        newsList: news,
        defaultImage: require('@/assets/img/default-image.jpg'),
        navValue: 'home',
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getNews(3, 0);
        this.getNews(0, 1);
        this.getNews(1, 2);
        this.getNews(2, 3);
      });
    },
    methods: {
      onModuleClick(value) {
        this.$router.push({name: value});
      },
      onItemClick(value) {
        this.$router.push({
          name: 'NewsDetail',
          params: {title: this.tabs[value.tab], article: value.article}
        });
      },
      getNews(type, tabIndex) {
        NewsService.getArticleByType(type, 1)
            .then((res) => {
              if (res.code === SUCCESS) {
                this.newsList.splice(tabIndex, 1, res.value.value);
              } else {
                this.$toast.info(res.message);
              }
            })
            .catch((e) => {
              console.log(e);
              this.$toast.info(constant.network_error);
            });
      },
      onMoreNewsClick() {
        this.$router.push({name: 'MoreNews'});
      }
    }
  }
</script>
<style scoped>
  #content {
    flex: 1 1 0 !important;
    width: 100%;
    overflow: auto;
  }

  .module-pane {
    margin: 8px auto;
    padding: 8px;
    background: white;
  }

  .module-title {
    line-height: 1.5;
  }

  .module-pane .mu-button {
    padding-top: 8px;
    width: 100%;
    height: auto;
  }

  .news-pane {
    padding: 0;
    margin: 8px auto;
    background: white;
  }

  .item-content {
    padding: 8px 0;
    width: 100%;
  }

  .item-content-text {
    overflow: hidden;
  }

  .item-content img {
    width: 100px;
    height: 80px;
    margin-left: 8px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .item-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
  }

  .item-desc {
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    color: #616161;
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
    height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .item-author {
    margin-top: 8px;
    line-height: 1.5;
    font-size: 12px;
    color: #616161;
  }

  .mu-divider {
    padding: 0 16px;
  }

  #more-news {
    width: 100%;
  }
</style>
<style>
</style>